<template>
  <div class="main">
    <div class="list">
      <el-input
        placeholder="请输入组织架构名称"
        prefix-icon="el-icon-search"
        v-model="queryData.department_name"
        clearable
        @input="getDepartmentList"
        @clear="handleClear"
      >
      </el-input>
      <el-tree
        style="margin-top: 20px"
        :props="{ label: 'department_name' }"
        default-expand-all
        highlight-current
        :data="list"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <div class="content">
      <div class="head">
        <div class="input">
          <span>姓名：</span>
          <el-input v-model="queryData.username" placeholder="请输入" />
        </div>
        <div class="input">
          <span>身份证号：</span>
          <el-input v-model="queryData.idcard" placeholder="请输入" />
        </div>
        <div class="input">
          <span>人员类型：</span>
          <el-select v-model="queryData.staff_type" style="width: 90%" clearable>
            <el-option :value="1" label="内部人员"></el-option>
            <el-option :value="2" label="项目人员"></el-option>
          </el-select>
        </div>
        <el-button type="primary" class="btn" @click="search">查询</el-button>
        <el-button type="primary" class="btn" @click="reset">重置</el-button>
        <el-button type="primary" class="btn" @click="add">新增</el-button>
<!--        <a :href="downUrl" style="margin: 0px 10px"><el-button type="primary" class="btn">下载模板</el-button></a>-->
<!--        <el-upload action="#" :show-file-list="false" accept=".xlsx,.xls" :http-request="handleImport">-->
<!--          <el-button class="btn" type="primary">导入</el-button>-->
<!--        </el-upload>-->
      </div>
      <el-table
        ref="dataForm"
        :data="tableData"
        border
        v-loading="isTableLoading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        style="width: 100%"
        :max-height="tableHeight"
      >
        <el-table-column fixed type="index" align="center" label="序号" width="50" />
        <el-table-column fixed prop="username" align="center" show-overflow-tooltip label="姓名" min-width="140" />
        <el-table-column fixed prop="sex" align="center" show-overflow-tooltip label="性别" min-width="60" />
        <el-table-column prop="idcard" align="center" label="身份证号" min-width="160"></el-table-column>
        <el-table-column prop="mobile" align="center" label="联系方式/账号" width="140"></el-table-column>
        <el-table-column prop="edu_name" align="center" label="学历" width="120"></el-table-column>
        <el-table-column prop="staff_type" align="center" label="人员类型" width="140">
          <template #default="scope">{{ scope.row.staff_type == 1 ? '内部人员' : '项目人员' }}</template>
        </el-table-column>
        <el-table-column prop="job_name" align="center" label="工种/岗位" width="140"></el-table-column>
        <el-table-column prop="img" align="center" label="照片" width="100">
          <template #default="scope">
            <span class="look" @click="handleImg(scope.row)">查看</span>
          </template>
        </el-table-column>
        <el-table-column prop="job_status" align="center" label="状态" width="100">
          <template #default="scope">
            {{ scope.row.job_status == 1 ? '在职' : '离职' }}
          </template>
        </el-table-column>
<!--        <el-table-column prop="status" align="center" label="账号状态" width="100">-->
<!--          <template #default="scope">-->
<!--            {{ scope.row.status == 1 ? '正常' : '禁用' }}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column fixed="right" align="center" prop="action" label="操作" width="180">
          <template #default="scope">
            <div class="action">
              <span @click="edit(scope.row)">编辑</span>
              <!-- <span @click="delOk(scope.row)">删除</span> -->
              <span @click="resetPassword(scope.row)">重置密码</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        style="margin-top: 5px; text-align: right"
        @size-change="search"
        @current-change="getList"
        :current-page.sync="queryData.page"
        :page-size.sync="queryData.size"
        layout="total, prev, pager, next,sizes,jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
      <span>确定删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delOk">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="ruleForm.id ? '编辑人员' : '新增人员'"
      :visible.sync="isShowAdd"
      width="800px"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form
        :model="ruleForm"
        style="width: 100%"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        label-width="100px"
      >
        <el-row :gutter="20">
          <!-- <el-form-item label="所属企业" prop="testId">
          <el-select style="width: 100%" v-model="ruleForm.testId" placeholder="请选择">
            <el-option label="企业" :value="1">企业</el-option>
          </el-select>
        </el-form-item> -->
          <el-col :span="12">
            <el-form-item label="姓名" prop="username">
              <el-input v-model="ruleForm.username" placeholder="请输入名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idcard">
              <el-input maxlength="18" v-model="ruleForm.idcard" placeholder="请输入身份证号"></el-input>
              <span style="color: red; font-size: 12px;">注:密码为身份证后6位</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-select style="width: 100%" v-model="ruleForm.sex" placeholder="请选择">
                <el-option v-for="(item, index) in sexList" :key="index" :value="item.value">{{
                    item.value
                  }}</el-option>
<!--                <el-option value="男">男</el-option>-->
<!--                <el-option value="女">女</el-option>-->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="mobile">
              <el-input v-model="ruleForm.mobile" maxlength="11" placeholder="请输入联系方式"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织架构" prop="department_ids">
              <el-cascader
                v-model="ruleForm.department_ids"
                placeholder="请选择"
                :options="list"
                :props="{ checkStrictly: true, value: 'id', label: 'department_name' }"
                clearable
                style="width: 100%"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历" prop="edu_id">
              <el-select style="width: 100%" v-model="ruleForm.edu_id" placeholder="请选择">
                <el-option v-for="(item, index) in eduList" :key="index" :label="item.para_name" :value="item.id">{{
                  item.para_name
                }}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人员类型" prop="staff_type">
              <el-select style="width: 100%" v-model="ruleForm.staff_type" placeholder="请选择">
                <el-option label="内部人员" :value="1">内部人员</el-option>
                <el-option label="项目人员" :value="2">项目人员</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工种/岗位" prop="job_id">
              <el-cascader
                v-model="ruleForm.job_id"
                placeholder="请选择"
                :options="jobListType"
                :props="{ checkStrictly: true, value: 'id', label: 'para_name' }"
                clearable
                style="width: 100%"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参加工作" prop="start_work_time">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                v-model="ruleForm.start_work_time"
                placeholder="选择日期"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="进场时间" prop="entry_time">
              <el-date-picker
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                v-model="ruleForm.entry_time"
                placeholder="选择日期"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="account_status">
            <el-form-item label="状态" prop="status" >
              <el-select style="width: 100%" v-model="ruleForm.status" placeholder="请选择">
                <el-option label="正常" :value="1">正常</el-option>
                <el-option label="禁用" :value="2">禁用</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="账号状态" prop="job_status" >
              <el-select style="width: 100%" v-model="ruleForm.job_status" placeholder="请选择">
                <el-option label="在职" :value="1">在职</el-option>
                <el-option label="离职" :value="2">离职</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="account_status === false">

          </el-col>
          <el-col :span="12" v-if="this.is_role">
            <el-form-item label="抓拍状态" prop="snap_status">
              <el-radio-group v-model="ruleForm.snap_status">
                <el-radio :label="0">不抓拍</el-radio>
                <el-radio :label="1">抓拍</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="this.is_role">
            <el-form-item label="倍速状态" prop="speed_status">
              <el-radio-group v-model="ruleForm.speed_status">
                <el-radio :label="0">不开启</el-radio>
                <el-radio :label="1">开启</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人员照片" prop="img_url">
              <div
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                accept=".jpg,.png,.jpeg"
                :before-upload="beforeAvatarUpload"
                :http-request="handleAvatarSuccess"
                @click="avatarMoadl = true"
              >
                <img v-if="ruleForm.img_url" :src="ruleForm.img_url" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </div>
              <p class="prompt">格式JPG、PNG、JPGE，文件大小不超过5M</p>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任命文件" prop="appointment_img_url">
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                accept=".jpg, .png, .jpeg"
                :before-upload="beforeAvatarUpload"
                :http-request="
                  (file) => {
                    handleAvatarSuccess(file, 'appointment_img_url');
                  }
                "
              >
                <img v-if="ruleForm.appointment_img_url" :src="ruleForm.appointment_img_url" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <p class="prompt">格式JPG、PNG、JPGE，文件大小不超过5M</p>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业证件" prop="professional_certificate_img_url">
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                accept=".jpg, .png, .jpeg"
                :before-upload="beforeAvatarUpload"
                :http-request="
                  (file) => {
                    handleAvatarSuccess(file, 'professional_certificate_img_url');
                  }
                "
              >
                <img
                  v-if="ruleForm.professional_certificate_img_url"
                  :src="ruleForm.professional_certificate_img_url"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <p class="prompt">格式JPG、PNG、JPGE，文件大小不超过5M</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-card>
          <div
            class="title"
            style="display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px"
          >
            <span>证书信息</span>
            <el-button style="margin-left: auto" type="primary" @click="addCert">新增证书信息</el-button>
          </div>
          <el-card style="margin-bottom: 20px; position: relative" v-for="(item, index) in ruleForm.certs" :key="index">
            <el-form-item
              label="证书分类"
              :prop="'certs.' + index + '.type_id'"
              :rules="{
                required: true,
                message: '请选择证书分类',
                trigger: 'change',
              }"
            >
              <el-select style="width: 100%" v-model="item.type_id" placeholder="请选择">
                <el-option
                  v-for="(item2, index2) in certTypeList"
                  :key="index2"
                  :label="item2.name"
                  :value="item2.id"
                  >{{ item2.name }}</el-option
                >
              </el-select>
            </el-form-item>
            <el-form-item
              label="职业证书编号"
              :prop="'certs.' + index + '.cert_code'"
              :rules="{
                required: true,
                message: '请输入职业证书编号',
                trigger: 'blur',
              }"
            >
              <el-input v-model="item.cert_code" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item
              label="是否永久有效"
              :prop="'certs.' + index + '.expire_type'"
              :rules="{
                required: true,
                message: '请选择是否永久有效',
                trigger: 'change',
              }"
            >
              <el-select style="width: 100%" v-model="item.expire_type" placeholder="请选择">
                <el-option label="是" :value="1">是</el-option>
                <el-option label="否" :value="2">否</el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="证书有效期"
              :prop="'certs.' + index + '.effective'"
              :rules="{
                required: true,
                message: '请选择证书有效期',
                trigger: 'change',
              }"
              v-if="item.expire_type == 2"
            >
              <el-date-picker
                style="width: 100%"
                v-model="item.effective"
                type="daterange"
                range-separator="至"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="证书照片"
              :prop="'certs.' + index + '.cert_imgs'"
              :rules="{
                required: true,
                message: '请上传证书照片',
                trigger: 'change',
              }"
            >
              <div class="photo">
                <div class="photo_item">
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    :show-file-list="false"
                    accept=".jpg, .png, .jpeg"
                    :before-upload="beforeAvatarUpload"
                    :http-request="(file) => handleAvatarSuccess(file, 'cert_imgs', index)"
                  >
                    <img v-if="item.cert_imgs" :src="item.cert_imgs" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <div style="text-align: right">
              <el-button type="danger" icon="el-icon-search" @click="handelDel(index)">删除证书</el-button>
            </div>
          </el-card>
        </el-card>
        <!-- <el-form-item style="margin-top: 20px">
          <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
          <el-button @click="back">取消</el-button>
        </el-form-item> -->
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose('ruleForm')">取 消</el-button>
        <el-button type="primary" :loading="subLoading" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
    <el-image-viewer
      v-if="showImg"
      :on-close="
        () => {
          showImg = false;
        }
      "
      :url-list="imgList"
    />
    <!-- 上传头像 -->
    <el-dialog :visible.sync="avatarMoadl" title="人员照片上传" width="720px">
      <CropperImg 
        v-if="avatarMoadl" 
        :cropWidth="230"
        :cropHeight="310"
        :fixedRatio="true"
        :aspectRatio="[23, 31]"
        :isCircle="false"
        @uploadImgSuccess="uploadImgSuccess"
      ></CropperImg>
    </el-dialog>
  </div>
</template>

<script>
import {
  DepartmentList,
  StaffList,
  upload,
  StaffSave,
  Parameterlist,
  ParameterListType,
  StaffDelete,
  StaffImport,
  StaffResetPassword,
  StaffCertTypes,
  StaffInfo
} from '@/api/manage';
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import CropperImg from '@/components/cropperImg';

// 自定义身份证校验规则
const validateIdCard = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入身份证号'));
  } else {
    // 简单的身份证号正则表达式
    const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if (reg.test(value)) {
      callback();
    } else {
      callback(new Error('请输入正确的身份证号'));
    }
  }
};
// 自定义手机号校验规则
const validatePhone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入手机号'));
  } else {
    // 简单的中国大陆手机号正则表达式
    const reg = /^1[3456789]\d{9}$/;
    if (reg.test(value)) {
      callback();
    } else {
      callback(new Error('请输入正确的手机号'));
    }
  }
};
export default {
  name: 'staff',
  components: { ElImageViewer, CropperImg },
  data() {
    return {
      // job_status_show: false,
      account_status : false,
      avatarMoadl: false,
      subLoading: false,
      tableHeight: 500,
      downUrl: process.env.VUE_APP_API_URL + 'template/staff_import_template.xlsx',
      name: '',
      list: [],
      ruleForm: {
        name: '安全生产',
        type: '',
        parent: '',
        department_id: '',
        department_ids: [],
        username: '',
        idcard: '',
        mobile: '',
        edu_id: '',
        level_id: '',
        job_id: '',
        img_url: '',
        professional_certificate_img_url: '',
        appointment_img_url: '',
        account: '',
        status: 1,
        job_status: 1,
        certs: [],
        snap_status: 1,
        speed_status: 0,
        sex: '男',

      },
      level: 0,
      rules: {
        name: [{ required: true, message: '请输入节点', trigger: 'blur' }],
        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
        username: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        idcard: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { validator: validateIdCard, trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' },
        ],
        department_ids: [{ required: true, message: '请选择组织架构', trigger: 'change' }],
        // edu_id: [{ required: true, message: '请选择学历', trigger: 'change' }],
        job_id: [{ required: true, message: '请选择工种/岗位', trigger: 'change' }],
        // status: [{ required: true, message: '请选择账号状态', trigger: 'change' }],
        job_status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        staff_type: [{ required: true, message: '请选择人员类型', trigger: 'change' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        img_url: [{ required: true, message: '请上传照片', trigger: 'change' }],
      },
      Node: {},
      isTableLoading: false,
      tableData: [],
      total: 0,
      queryData: {
        page: 1,
        size: 10,
        idcard: '',
        username: '',
        department_name: '',
        staff_type: undefined,
      },
      is_role: false,
      dialogVisible: false,
      isShowAdd: false,
      eduList: [],
      jobList: [],
      jobListType:[],
      levelList: [],
      showImg: false,
      imgList: [],
      cert: {
        type_id: undefined,
        cert_code: undefined,
        expire_type: 2,
        start_time: undefined,
        end_time: undefined,
        cert_imgs: undefined,
        effective: undefined,
      },
      certTypeList: [],
      // 性别下拉
      sexList: [
        { value: '男' },
        { value: '女' },
      ],
    };
  },
  computed: {},
  watch: {
    'ruleForm.certs': {
      handler(newVal) {
        newVal.forEach((item, index) => {
          if (item.effective && item.effective.length) {
            item.start_time = item.effective[0];
            item.end_time = item.effective[1];
          } else {
            item.start_time = undefined;
            item.end_time = undefined;
          }
        });
      },
      deep: true,
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 260;
    });
    this.getList();
    this.getDepartmentList();
    this.getDepartmentListType();
    this.getParameter(3);
    this.getParameter(4);
    this.getParameter(5);
    this.getStaffCertTypes();
  },
  methods: {
    getStaffCertTypes() {
      StaffCertTypes().then((res) => {
        this.certTypeList = res.data.certTypes;
      });
    },
    handelDel(index) {
      this.ruleForm.certs.splice(index, 1);
    },
    addCert() {
      let arr = this.ruleForm.certs;
      arr.push(JSON.parse(JSON.stringify(this.cert)));
      this.$set(this.ruleForm, 'certs', arr);
    },
    uploadImgSuccess(data) {
      this.avatarMoadl = false;
      this.ruleForm.img_url = data.url;
    },
    resetPassword(item) {
      this.$confirm('确定重置密码为身份证后6位?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        StaffResetPassword({
          id: item.id,
        }).then((res) => {
          this.$message.success('重置成功');
        });
      });
    },
    search() {
      this.queryData.page = 1;
      this.getList();
    },
    reset() {
      this.queryData.username = '';
      this.queryData.idcard = '';
      this.search();
    },
    down() {},
    add() {
      // this.job_status_show = false;
      this.account_status = false;
      this.isShowAdd = true;
      this.ruleForm = {
        department_id: '',
        department_ids: [],
        username: '',
        idcard: '',
        mobile: '',
        edu_id: '',
        level_id: '',
        job_id: '',
        img_url: '',
        account: '',
        appointment_img_url: '',
        professional_certificate_img_url: '',
        certs: [],
        snap_status: 1,
        speed_status: 0,
        sex: '男',
        status: 1,
        job_status: 1,
      };
      this.$refs['ruleForm'].resetFields();
    },
    edit(item) {
      // this.job_status_show = true;
      this.account_status = true;
      StaffInfo({
        id: item.id,
      }).then((res) => {
        this.ruleForm = JSON.parse(JSON.stringify(res.data.info));
        // if (item.pidstr) {
          // this.ruleForm.department_ids = item.pidstr.split(',').map(Number);
        // }
        this.ruleForm.certs = res.data.info.certs.map((item) => {
          if (item.start_time && item.end_time) {
            item.effective = [item.start_time, item.end_time];
          }
          return item;
        });
        // 为新字段设置默认值
        if (this.ruleForm.snap_status === undefined) {
          this.ruleForm.snap_status = 1;
        }
        if (this.ruleForm.speed_status === undefined) {
          this.ruleForm.speed_status = 0;
        }
        this.isShowAdd = true;
      });
    },
    del(item) {
      this.dialogVisible = true;
      this.item = item;
    },
    delOk(item) {
      this.$confirm('确定删除该人员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        StaffDelete({
          id: item.id,
        }).then((res) => {
          this.$message.success('删除成功');
          this.dialogVisible = false;
          this.getList();
          this.item = null;
        });
      });
    },
    handleImg(item) {
      this.imgList = [item.img_url];
      this.showImg = true;
    },
    handleClose() {
      this.ruleForm = {
        department_id: '',
        department_ids: [],
        username: '',
        idcard: '',
        mobile: '',
        edu_id: '',
        level_id: '',
        job_id: '',
        status: 1,
        img_url: '',
        account: '',
        appointment_img_url: '',
        professional_certificate_img_url: '',
        job_status: 1,
        certs: [],
        snap_status: 1,
        speed_status: 0,
      };
      this.isShowAdd = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.subLoading = true;
          this.ruleForm.department_id = this.ruleForm.department_ids[this.ruleForm.department_ids.length - 1];
          StaffSave(this.ruleForm)
            .then((res) => {
              this.$message.success(this.ruleForm.id ? '修改成功' : '添加成功');
              this.getList();
              this.$refs[formName].resetFields();
              this.isShowAdd = false;
              this.subLoading = false;
            })
            .catch(() => {
              this.subLoading = false;
            });
        } else {
          this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    handleNodeClick(data, Node) {
      this.Node = Node;
      this.queryData.department_id = data.id;
      this.queryData.page = 1;
      this.getList();
    },
    handleImport(e) {
      let obj = new FormData();
      obj.append('file', e.file);
      StaffImport(obj).then((res) => {
        this.$message.success('导入成功');
        this.getList();
      });
    },
    handleAvatarSuccess(e, type, index) {
      let obj = new FormData();
      obj.append('file', e.file);
      upload(obj).then((res) => {
        if (type != 'cert_imgs') {
          this.ruleForm[type] = res.data.url;
        } else {
          this.$set(this.ruleForm.certs[index], 'cert_imgs', res.data.url);
          // this.ruleForm.certs[index].cert_imgs = res.data.url;
        }
      });
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isLt2M;
    },
    getList() {
      this.isTableLoading = true;
      StaffList(this.queryData).then((res) => {
        this.isTableLoading = false;
        this.tableData = res.data.list;
        this.total = res.data.total;
        this.is_role = res.data.is_role;
      });
    },


    getDepartmentList() {
      DepartmentList({
        department_name: this.queryData.department_name,
      }).then((res) => {
        this.list = res.data.list;
      });
    },

  
    getDepartmentListType() {
      ParameterListType().then((res) => {
        this.jobListType = res.data.list;
      });
    },


    handleClear() {
      this.queryData.department_name = '';
      this.queryData.department_id = '';
      this.search();
      this.getDepartmentList();
      this.getDepartmentListType();
    },
    getParameter(type) {
      Parameterlist({
        type: type,
      }).then((res) => {
        switch (type) {
          case 3:
            // 学历
            this.eduList = res.data;
            break;
          case 4:
            // 岗位
            this.jobList = res.data;
            break;
          case 5:
            // 人员级别
            this.levelList = res.data;
            break;
          default:
            break;
        }
      });
    },
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: calc(-100px + 100vh);
  background: #fff;
  /* display: flex;
  align-items: flex-start; */
  overflow: hidden;
  padding: 25px 20px;
  position: relative;
}
.list {
  width: 220px;
  height: 95%;
  overflow: auto;
  flex-shrink: 0;
  padding-right: 15px;
  position: absolute;
  border-right: 1px solid #e3e3e3;
  left: 20px;
  top: 25px;
}
.content {
  width: 100%;
  min-height: 70vh;
  padding-left: 240px;
}
.action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.action span,
.look {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}
.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
  padding-bottom: 0px;
}
.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}
.input > span {
  font-size: 12px;
  flex-shrink: 0;
}
.btn {
  margin-bottom: 20px;
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}
.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100%;
  display: block;
}
.prompt {
  font-size: 12px;
  color: red;
  margin-bottom: 5px;
}
</style>
